<template>
  <v-form v-model="valid" ref="myOrderForm">
    <v-layout wrap>
      <v-flex>
        <v-text-field v-model="Order.id" hidden />
        <v-layout>
          <v-text-field v-if="isEdit" v-model="Order.lsh" label="流水号" disabled />
          <v-text-field v-if="isEdit" v-model="Order.statusInfo" label="状态" disabled />
        </v-layout>
        <v-layout>
          <v-select
            item-text="pathName"
            item-value="pathCode"
            v-model="Order.pathCode"
            :items="paths"
            label="录入路线"
            disabled
          />
          <v-text-field v-if="isEdit" v-model="Order.lrsj" label="录入时间" disabled />

          <!-- <v-text-field v-if="isEdit" v-model="Order.lrusername" label="录入人" disabled /> -->
        </v-layout>
        <v-layout>
          <v-text-field v-if="isEdit" v-model="Order.lrsj" label="录入时间" disabled />
          <v-text-field v-if="isEdit" v-model="Order.fcsj" label="发出时间" disabled />
          <v-text-field v-if="isEdit" v-model="Order.sdsj" label="送达时间" disabled />
        </v-layout>

        <el-table
          class="elevation-1"
          :data="thList"
          ref="multipleTable"
          border
          fit
          tooltip-effect="dark"
        >
          <el-table-column prop="lsh" label="流水号" width="180"></el-table-column>
          <el-table-column prop="hh" label="货号" width="180"></el-table-column>
          <el-table-column prop="pinm" label="品名"></el-table-column>
          <el-table-column prop="xingh" label="型号"></el-table-column>
          <el-table-column prop="sl" label="数量"></el-table-column>
          <el-table-column prop="lxInfo" label="类型"></el-table-column>
          <el-table-column prop="contact" label="联系人"></el-table-column>
          <el-table-column prop="phone" label="联系方式"></el-table-column>
          <el-table-column prop="location" label="地址"></el-table-column>
          <el-table-column prop="statusInfo" label="状态"></el-table-column>
        </el-table>

        <v-layout>
          <v-spacer />
          <v-btn v-if="this.isEdit" @click="submit" color="primary">到货</v-btn>
        </v-layout>
      </v-flex>
    </v-layout>
  </v-form>
</template>

<script>
import VDistpicker from "v-distpicker";
export default {
  name: "logistics-form",
  props: {
    oldOrder: {
      type: Object
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      search: "",
      valid: false, // 表单校验结果标记
      Order: {
        lrusername: "", //
        lsh: "", //
        status: 0, //
        driverCode: "",
        pathCode: "",
        thList: []
      },
      singleSelect: false,
      selected: [],
      drivers: [],
      paths: [],
      nameRules: [v => !!v || "不能为空"],
      totalGoods: 0, // 总条数
      thList: [], // 当前页品牌数据
      loading: true, // 是否在加载中
      pagination: {}, // 分页信息

      checkbox: false
   
    };
  },
  mounted() {
    console.info("form mounted");
    // 渲染后执行
    // 查询数据
  },
  watch: {
    pagination: {
      // 监视pagination属性的变化
      deep: true, // deep为true，会监视pagination的属性及属性中的对象属性变化
      handler() {
        // 变化后的回调函数，这里我们再次调用getDataFromServer即可
        this.getDataFromServer();
      }
    },
    filter: {
      // 监视搜索字段
      handler() {
        this.getDataFromServer();
      },
      deep: true
    }
  },
  methods: {
    del() {},
    selectable(row, index) {
      return true;
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.selected = val;
    },
    getDataFromServer() {
      this.$http
        .get("/item/logistics/driverlist", {
          params: {}
        })
        .then(resp => {
          // 这里使用箭头函数
          this.drivers = resp.data;
          // 完成赋值后，把加载状态赋值为false
        });
      this.$http
        .get("/item/logistics/pathlist", {
          params: {}
        })
        .then(resp => {
          // 这里使用箭头函数
          this.paths = resp.data;
 
        });

      if (this.isEdit) {
        return;
      }
      console.info("form getDataFromServer");
      this.$http
        .get("/item/xsth/psmx", {
          params: {}
        })
        .then(resp => {
          // 这里使用箭头函数
          this.thList = resp.data;
          this.totalGoods = resp.data.total;
          // 完成赋值后，把加载状态赋值为false
          this.loading = false;
        });
    },

    submit() {
      // 表单校验
      if (this.$refs.myOrderForm.validate()) {
        // 定义一个请求参数对象，通过解构表达式来获取Order中的属性
        const { ...params } = this.Order;
        params.lrusername = window.localStorage.getItem("username");
        params.lrid = window.localStorage.getItem("id");
        params.truename = window.localStorage.getItem("truename");
        // params.deptCode = window.localStorage.getItem("deptCode");
        // params.storeCode = window.localStorage.getItem("storeCode");
        var newArr = [];
        this.selected.forEach((item, index) => {
          var imgList = {};
          imgList.ddh = item.lsh;
          imgList.status = 1;
          newArr.push(imgList);
        });

        params.list = newArr;
        this.$http({
          method: "post",
          url: "/item/pstp/tpdh",
          data: JSON.stringify(params),
          headers: {
            "Content-Type": "application/json;charset=UTF-8"
          }
        })
          .then(() => {
            // 关闭窗口
            this.$emit("close");
            this.$message.success("保存成功！");
          })
          .catch(() => {
            this.$message.error("保存失败！");
          });
      }
    },

    clear() {
      // 重置表单
      this.$refs.myOrderForm.reset();
    },
    province(obj) {
      if (obj.code) {
        this.Order.province = obj.value;
      } else {
        this.Order.province = "";
      }
    },
    city(obj) {
      if (obj.code) {
        this.Order.city = obj.value;
      } else {
        this.Order.city = "";
      }
    },
    area(obj) {
      if (obj.code) {
        this.Order.district = obj.value;
      } else {
        this.Order.district = "";
      }
    }
  },
  watch: {
    oldOrder: {
      // 监控oldOrder的变化
      handler(val) {
        if (val) {
          console.info(val);
          this.getDataFromServer();

          // 注意不要直接复制，否则这边的修改会影响到父组件的数据，copy属性即可
          this.Order = Object.deepCopy(val);
          this.thList = val.thList;
        } else {
          // 为空，初始化brand
          this.Order = {
            name: "",
            lsh: "",
            id: "",
            status: 0,
            province: "",
            city: "",
            district: "",
            hh: "",
            lrusername: "",
            contact: "",
            phone: "",
            qwsj: "",
            thList: []
          };
        }
      },
      deep: true
    }
  },
  components: { VDistpicker }
};
</script>

<style scoped>
</style>
